<template>
	<div class="left-navigation-panel">
		<div class="header">
			<awsui-input :placeholder="$t('搜索应用')" v-model="searchValue" @keyup.enter.native="filterAppData" clearable>
				<template #prefix>
					<i class="awsui-iconfont">&#xe6e9;</i>
				</template>
			</awsui-input>
		</div>
		<div class="main">
			<el-tabs v-model="activeName">
				<el-tab-pane :label="$t('已开启')" name="firstAppList">

					<el-skeleton style="width: 100%;" rows="5" :loading="appListLoading" animated>
						<template #template>
							<ul class="app-list-panel">
								<li v-for="i in 5" :key="i" class="app-each-row">
									<div class="row-app-img">
										<el-skeleton-item variant="image" style="width: 30px; height: 30px;"/>
									</div>
									<div class="row-app-name-ske">
										<el-skeleton-item variant="text" style="width: 100%;;height:25px;margin-top: 8px;"/>
									</div>
									<div class="row-app-status">{{$t("已设置")}}</div>
								</li>
							</ul>
						</template>
					</el-skeleton>

					<ul class="app-list-panel openlist" v-show="!appListLoading">
						<template v-if="appList.length > 0">
							<li v-for="(info,index) in appList" :key="index" :class="currentAppId==info.appId?'active':''" :ref="`appRow${info.appId}`" class="app-each-row" @click="setAppMobileHomePage(info)" @mouseenter="appMouseEnter(info)" @mouseleave="appMouseLeave(info)">
								<div v-if="info.isIconFont" class="row-app-icon" :style="{background: info.iconFont.color}">
									<i v-html="info.iconFont.code" class="awsui-iconfont"></i>
								</div>
								<div v-else-if="!info.isIconFont" class="row-app-img">
									<img :src="info.appIcon" width="30" height="30"/>
								</div>
								<el-tooltip class="item" effect="dark" :content="info.appId" placement="bottom-start" :show-after="500">
									<div class="row-app-name">
										<div>{{info.appName}}</div>
									</div>
								</el-tooltip>
								<div class="row-app-status">
                  {{$t("已设置")}}&nbsp;&nbsp;<i class='awsui-iconfont' v-if="currentAppId==info.appId" style="font-size:12px;">&#xe639;</i>
								</div>
							</li>
						</template>
						<li v-else>
							<div class="no-match">{{$t("暂无应用")}}</div>
						</li>
					</ul>
				</el-tab-pane>
				<el-tab-pane :label="$t('未开启')" name="secondAppList" :lazy="true">

					<el-skeleton style="width: 100%;" rows="5" :loading="appListLoading  && noMobileAppList.length == 0" animated>
						<template #template>
							<ul class="app-list-panel openlist">
								<li v-for="i in 5" :key="i" class="app-each-row">
									<div class="row-app-img">
										<el-skeleton-item variant="image" style="width: 30px; height: 30px;"/>
									</div>
									<div class="row-app-name-ske">
										<el-skeleton-item variant="text" style="width: 100%;;height:25px;margin-top: 8px;"/>
									</div>
								</li>
							</ul>
						</template>
					</el-skeleton>

					<ul class="app-list-panel unopenlist"
						v-infinite-scroll="loadunOpenAppListData"
						infinite-scroll-disabled="scrollLoading"
						infinite-scroll-distance="10"
					>
						<template v-if="noMobileAppList.length > 0">
							<li v-for="(info,index) in noMobileAppList" :key="index" :class="currentAppId==info.appId?'active':''"   class="app-each-row" @click="setAppMobileHomePage(info)">
								<div v-if="info.isIconFont" class="row-app-icon" :style="{background: info.iconFont.color}">
									<i v-html="info.iconFont.code" class="awsui-iconfont"></i>
								</div>
								<div v-else-if="!info.isIconFont" class="row-app-img">
									<img :src="info.appIcon" width="30" height="30"/>
								</div>
								<el-tooltip class="item" effect="dark" :content="info.appId" placement="bottom-start" :show-after="500">
									<div class="row-app-name-unopen">
										{{info.appName}}
									</div>
								</el-tooltip>
							</li>
						</template>
						<li v-else>
							<a class="action no-match" href="javascript:;">{{$t("暂无应用")}}</a>
						</li>
						<div v-if="noMobileAppList.length > 0" class="list-more-panel">
							<span v-if="!unOpenListIsEnd" @click="loadunOpenAppListData" class="hasMore">{{$t("加载更多")}}</span>
							<span v-else class="noMore">{{$t("已加载全部")}}</span>
						</div>
					</ul>
				</el-tab-pane>
			</el-tabs>
		</div>


	</div>
</template>

<script>

	export default {
		name: "LeftMobile",
		components: {},
		props: {},
		data() {
			return {
				currentAppId:'',
				appListLoading: true,
				searchValue:'',
				activeName: "firstAppList",
				appList: [],
				noMobileAppList: [],
				unOpenListIsEnd: true,
				unOpenListSize: 50,
				unOpenListStart: 0,
				//haveWorkbenchCmd:false,
				scrollLoading: false,
				canSearchFlag:true,
			}
		},
		mounted() {
			this.activeName = "firstAppList";
			this.loadAppListData();
		},
		watch: {
			searchValue(val) {
				let that = this;
				//that.$refs.navTree.filter(val);
			}
		},
		methods: {
			reloadAppListData(activeAppId,type) {
				this.appList = [];
				this.noMobileAppList = [];
				console.log(this.appList);
				console.log(this.noMobileAppList);
				this.unOpenListStart = 0;
				if(type =="afterOpen"){

				}else if(type =="afterClose"){

				}
				this.loadAppListData(activeAppId);
			},
			filterAppData(){
				/*
				if(this.searchValue.trim() == ""){
					this.$message({type: 'info', message: '请输入检索条件'});
					return false;
				}
				*/
				this.unOpenListIsEnd = true;
				this.unOpenListStart = 0;
				this.loadAppListData();
			},
			loadAppListData(activeAppId) {
				let $this = this;
				let that = this;

				if(!that.canSearchFlag){
					return false;
				}
				that.canSearchFlag = false;
				//console.log("enter search");
				let appId = "";
				let data = {
					url: 'jd',
					data: {
						cmd: 'CONSOLE_P_NAV_MOBILE_HOME_GET_APP_LIST',
						sid: settingParam.sessionId,
						appId: "",
						searchValue: that.searchValue ,
						type: "all",
						start: that.unOpenListStart,
						size: that.unOpenListSize,
					}
				};
				that.appListLoading = true;
				// 查询数据
				that.awsuiaxios.post(data).then(function (ro) {
					console.log(ro.data);
					that.appList = ro.data.openList;
					that.noMobileAppList = ro.data.unOpenList;
					that.unOpenListIsEnd = ro.data.end;
					if (that.unOpenListIsEnd) {
						that.scrollLoading = true;
					}
					that.unOpenListStart = ro.data.start;
					//that.haveWorkbenchCmd = ro.data.haveWorkbenchCmd;

					that.$nextTick().then(() => {
						if (activeAppId != undefined && activeAppId != "") {
							that.activeName = "firstAppList";
							that.$refs['appRow' + activeAppId].click();
							that.currentAppId = activeAppId;
						} else {
							if (that.activeName == "firstAppList") {
								let firstApp = document.querySelector('.openlist .app-each-row');
								that.activeName = "firstAppList";
								if (firstApp == undefined) {
									firstApp = document.querySelector('.unopenlist .app-each-row');
									that.activeName = "secondAppList";
								}
								if (firstApp) {
												  firstApp.click();
								}
							} else if (that.activeName == "secondAppList") {
								let firstApp = document.querySelector('.unopenlist .app-each-row');
								that.activeName = "secondAppList";
								if (firstApp == undefined) {
									firstApp = document.querySelector('.openlist .app-each-row');
									that.activeName = "firstAppList";
								}
								if (firstApp) {
								  firstApp.click();
								}
							}
						}
					});
					that.appListLoading = false;
					that.canSearchFlag = true;
					//console.log("end search");
				}).catch(error => {
					console.log(error);
				});
			},
			loadunOpenAppListData() {
				let $this = this;
				let that = this;
				let appId = "";
				let data = {
					url: 'jd',
					data: {
						cmd: 'CONSOLE_P_NAV_MOBILE_HOME_GET_APP_LIST',
						sid: settingParam.sessionId,
						appId: "",
						searchValue: that.searchValue,
						type: "unOpen",
						start: that.unOpenListStart,
						size: that.unOpenListSize,
					}
				};
				that.appListLoading = true;
				that.scrollLoading = true;
				// 查询数据
				that.awsuiaxios.post(data).then(function (ro) {
					console.log(ro.data);
					var unOpenList = ro.data.unOpenList;
					that.noMobileAppList = that.noMobileAppList.concat(unOpenList);
					that.noMobileAppList = that.uniqueUnOpenArray(that.noMobileAppList);
					that.unOpenListIsEnd = ro.data.end;
					that.unOpenListStart = ro.data.start;
					that.appListLoading = false;
					that.scrollLoading = that.unOpenListIsEnd;
				}).catch(error => {
					console.log(error);
				});
			},

			setAppMobileHomePage(info) {
				let $this = this;
				let that = this;
				that.$emit('setAppMobileHomePage', info);
				that.currentAppId = info.appId;
				console.log( info.appId);
			},
			appMouseEnter(data){
				data.showOp = true;
			},
			appMouseLeave(data){
				data.showOp = false;
			},
			uniqueUnOpenArray(array) {
				var n = [];//一个新的临时数组
				var appIdN = [];//存appId
				//遍历当前数组
				for (var i = 0; i < array.length; i++) {
					//如果当前数组的第i已经保存进了临时数组，那么跳过，
					//否则把当前项push到临时数组里面
					if (appIdN.indexOf(array[i].appId) == -1) {
						n.push(array[i]);
						appIdN.push(array[i].appId);
					}
				}
				return n;
			}
		}
	}
</script>

<style scoped>
	.header{
		padding:6px 30px 5px 10px;
		height: 35px;
		margin-top: -5px;
	}

	.main {
		padding:0px 5px 10px 5px;
		/*
		height: calc(100vh - 35px - 10px - 65px);
		overflow-y:auto;
		 */
	}

	.app-list-panel {
		height: calc(100vh - 35px - 10px - 65px - 55px);
		overflow-y:auto;
	}

	.app-each-row {
		cursor: pointer;
		height: 40px;
		line-height: 40px;
		padding: 5px 0px;
	}

	.app-list-panel li:hover {
		background: #f8f8f8;
		border-radius: 4px;
	}

	.app-list-panel li.active {
		background: #f8f8f8;
		border-radius: 4px;
	}

	.app-list-panel li .no-match {
		color: #999;
		text-align: center;
		font-size: 14px;
		width: 100%;
		display: inline-block;
	}

	.row-app-name-ske {
		display: inline-block;
		padding: 0px 5px;
		width: 150px;
		overflow: hidden;
		height: 40px;
		line-height: 40px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.row-app-name {
		display: inline-block;
		padding: 0px 5px;
		max-width: 150px;
		width: auto;
		overflow: hidden;
		height: 16px;
		line-height: 16px;
		margin-top: 12px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.row-app-name div {
		display: inline-block;
		max-width: 150px;
		width: auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.row-app-name-unopen {
		display: inline-block;
		padding: 0px 5px;
		max-width: 200px;
		width: auto;
		overflow: hidden;
		height: 16px;
		line-height: 16px;
		margin-top: 12px;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.row-app-name-unopen div {
		display: inline-block;
		max-width: 200px;
		width: auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.row-app-status{
		float: right;
		width: 60px;
		color: #888888;
		padding-right: 5px;
    height: 30px;
    overflow: hidden;
	}

	.row-app-icon {
		display: inline-block;
		float: left;
		width: 30px;
		height: 30px;
		line-height: 30px;
		color: #ffff;
		border-radius: 5px;
		text-align: center;
		margin-top: 5px;
		margin-left: 10px;
	}

	.row-app-icon i {
		size: 24px;
	}

	.row-app-img {
		display: inline-block;
		float: left;
		width: 30px;
		height: 30px;
		line-height: 30px;
		color: #ffff;
		border-radius: 5px;
		text-align: center;
		margin-top: 5px;
		margin-left: 10px;
	}

	.list-more-panel {
		height: 30px;
		line-height: 30px;
		vertical-align: middle;
		text-align: center;
		width: 50%;
		margin: 5px auto;
	}

	.list-more-panel span {
		width: 100%;
		height: 30px;
		display: inline-block;
		border-radius: 30px;
		background: #f1f1f1;
	}

	.list-more-panel .hasMore:hover {
		cursor: pointer;
		background: #4E7FF9;
		color: #ffffff;
	}

</style>
<style>
	.el-drawer__header{
		padding:16px;
		margin-bottom:0px;
		font-size: 16px;
		color: #333;
		font-weight: 700;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.el-menu {
		border-right: none;
	}

	.el-table__header {
		width: 100% !important;
	}

	.el-table .warning-row {
		color: red !important;
	}

</style>